﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>绑定诊疗卡</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/lobsteruiframe/weui/css/weui.css" />
    <link rel="stylesheet" href="/lobsteruiframe/weui/css/weuix.css" />
    <link href="/customer/css/blue.css" rel="stylesheet" />
    <script src="/lobsteruiframe/weui/js/zepto.min.js"></script>
    <script src="/lobsteruiframe/weui/js/zepto.weui.js"></script>
    <script src="/lobsteruiframe/weui/js/php.js"></script>
    <script src="/jslib/template-web.js"></script>
    <script src="/jslib/lobster.js"></script>
    <style type="text/css">
        input[type='checkbox'].switch {
            outline: none;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            position: relative;
            width: 50px;
            height: 25px;
            background: #ccc;
            border-radius: 10px;
            transition: border-color .3s, background-color .3s;
        }

            input[type='checkbox'].switch::after {
                content: '';
                display: inline-block;
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
                background: #fff;
                box-shadow: 0,0,2px,#999;
                transition: .4s;
                top: 1px;
                bottom: 1px;
                position: absolute;
                left: 1px;
            }

            input[type='checkbox'].switch:checked {
                background: rgb(19, 206, 102);
            }
                /* 当input[type=checkbox]被选中时：伪元素显示下面样式 位置发生变化 */
                input[type='checkbox'].switch:checked::after {
                    content: '';
                    position: absolute;
                    left: 55%;
                    top: 1px;
                }

        .tipsTitile {
            background-color: #e0ecfa;
            color: #CCCCCC;
            padding: 16px;
            font-size: 17px;
        }

        .tips {
            font-size: 17px;
            padding-left: 15px;
            line-height: 40px;
            text-align: center;
        }
    </style>


</head>

<body>
    <div class='pageContent' id="maincontent">

    </div>
</body>
</html>


<script type="text/javascript">

    lobsterh5.main({
        data: {
            PatientId: 0,
            Code: 0,
            CardId: 0,
            CardNo: "",
            CardName: "",
            BusinessText: ""
        },
        //初始化页面
        pageload: function () {
            this.data.PatientId = lobsterh5.GetUrlParam("PatientId");
            this.data.Code = lobsterh5.GetUrlParam("Code");
            this.data.CardId = lobsterh5.GetUrlParam("CardId");
            this.data.CardNo = lobsterh5.GetUrlParam("CardNo");
            this.data.CardName = decodeURI(lobsterh5.GetUrlParam("CardName"));
            this.data.BusinessText = decodeURI(lobsterh5.GetUrlParam("BusinessText"));

            this.getdata();
        },
        //初始化事件
        initevent: function () {
            var self = this;
            //绑卡
            $(document).on('click', "#bindcard", function (obj) {
                //console.log("bindcard");
                //console.log($("#switch").is(":checked"));
                //var checked = $("#switch").is(":checked");
                self.bindCard();
            });
        },
        getdata() {
            var self = this;
            var patientCard = {
                PatientId: self.data.PatientId || 0,
                Code: self.data.Code || 0,
                CardId: self.data.CardId || 0,
                CardNo: self.data.CardNo || "",
                CardName: self.data.CardName || "",
                BusinessText: self.data.BusinessText || "",
            }
            self.inittemp("cardinfo", "maincontent", patientCard);
            $("#switch").attr("checked", false);

            self.initevent();
        },
        inittemp(tempid, _id, data) {
            var html = template(tempid, data);
            $("#" + _id).html(html);
        },
        bindCard() {
            var self = this;
            var cardNum = $("#cardnum").val();
            var checked = $("#switch").is(":checked");

            var patientCard = {
                PatientId: self.data.PatientId || 0,
                Code: self.data.Code || 0,
                CardId: self.data.CardId || 0,
                CardNo: cardNum || "",
                IsDefault: (checked ? 1 : 0),
                CardTypeName: self.data.CardName,
            }

            lobsterh5.POST("/admin/v1/CPatient/SavePatientCard", patientCard).then(res => {
                location.replace("cardlist.html?patientId=" + patientCard.PatientId);
                // history.back(-1);
                //location.reload();
            }).catch(res => {
                alert(res.msg || "操作失败");
            });
        }
    });
</script>

<script type="text/template" id="cardinfo">
    <div class="tipsTitile" style="display:flex">
        <tedivxt>温馨提示：当前诊疗卡只支持</tedivxt>
        <div class="orange-color" style="margin-left:7.5px;text-decoration:underline">{{ BusinessText }}</div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">{{ CardName }}</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" placeholder="" value='{{CardNo}}' type="text" id="cardnum">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">是否默认</label></div>
        <div class="weui-cell__bd">
            <input class="weui-switch" type="checkbox" id="switch">
        </div>
    </div>
    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary" href="javascript:" id="bindcard">绑定</a>
    </div>

</script>

